<template>
	<div>
		<div class="q-error-title">
			<span class="q-style-type">【选词填空题】</span>
			<ve-parse class="q-style-text" :article="parseTitle" />
		</div>
		<div class="choose-word-answer-box q-error-options">
			<div
				class="choose-word-answer-item"
				v-for="item in questionOption"
				:key="item.answerSeq"
			>
				{{ item.answerOption }}
			</div>
		</div>
	</div>
</template>

<script>
	/**
	 * @description 选词填空题组件
	 */
	export default {
		props: {
			// 题干
			questionTitle: {
				type: String,
				default: ""
			},
			// 题目答案列表
			questionOption: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			parseTitle() {
				return this.questionTitle.replace(/（\s*\)|\(\s*）|\(\s*\)|（\s*）/g,'<span style="display:inline-block;padding: 0 25px;margin: 0 5px;border-bottom: 1px solid #000;"> </span>');
            }
		}
	};
</script>
<style lang="less" scoped>
	.choose-word-answer-box {
		display: flex;
		flex-wrap: wrap;
		.choose-word-answer-item {
			margin-right: 12px;
			margin-top: 12px;
			padding: 4px 15px;
			background-color: #f8f8f8;
			font-size: 14px;
            line-height: 20px;
			color: #262626;
			border: 0.5px solid #262626;
			border-radius: 4px;
		}
	}
</style>
